<template>
    <div class="pd-20">
        <el-form :model="form" label-width="80px" ref="form">
            <!-- 选择菜单还是按钮 -->
            <el-form-item label="类型">
                <el-select v-model="form.type" placeholder="选择类型">
                    <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <!-- 上级菜单 -->
            <el-form-item label="上级菜单"  v-if="!worksId">
                <SelectTree :options="options"></SelectTree>
            </el-form-item>

            <el-form-item label="菜单名称">
                <el-input placeholder="请输入菜单名称" style="width: 500px" v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="权限标识" v-if="form.type == 'button'">
                <el-input placeholder="请输入权限标识" style="width: 500px" v-model="form.mask"></el-input>
            </el-form-item>

            <el-form-item label="菜单图标" v-if="form.type == 'menu'">
                <SelectIcon @custom-event="eventFun"></SelectIcon>
            </el-form-item>

            <el-form-item label="路由名称" v-if="form.type == 'menu'">
                <el-input placeholder="请输入路由名称" style="width: 500px" v-model="form.path_name"></el-input>
            </el-form-item>

            <el-form-item label="路由" v-if="form.type == 'menu'">
                <el-input placeholder="请输入路由" style="width: 500px" v-model="form.path"></el-input>
            </el-form-item>

            <!-- <el-form-item label="上级ID">
                <el-input placeholder="选择上级ID" style="width:500px" v-model="form.pid"></el-input>
            </el-form-item> -->

            <!-- 是否显示在菜单列表 1显示 0隐藏 -->
            <el-form-item label="是否显示" v-if="form.type == 'menu'">
                <el-switch v-model="show" @change="showFun" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" style="width: 470px; margin: 30px auto" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import VueEditor from "@/components/Editor/index"; // ES6 Module
import SelectTree from "@/components/SelectTree/index";
import SelectIcon from "@/components/SelectIcon/index";
export default {
    components: {
        VueEditor,
        SelectTree,
        SelectIcon,
    },
    data() {
        return {
            form: {
                name: "",
                mask: null, //用户输入
                pid: null, //上级id
                path_name: "",
                path: "",
                type: "menu", //menu菜单button按钮
                show: 1, //是否显示，1显示，0隐藏
                icon: "",
            },
            cate: [],
            type: "create", //判断状态
            loading: false,
            init: false,
            show: true,
            typeList: [
                {
                    name: "菜单",
                    value: "menu",
                },
                {
                    name: "按钮",
                    value: "button",
                },
            ],
            confirmPassword: "",
            page: 1,
            moreBut: false,
            iconList: [],
            iconBoxShow: false,
            options: [
                {
                    value: "sdsd1", // ID字段名
                    label: "管理员", // 显示名称
                    children: [
                        {
                            value: "1", // ID字段名
                            label: "管理员子菜单", // 显示名称
                            children: [], // 子级字段名
                        },
                    ], // 子级字段名
                },
                {
                    value: "1", // ID字段名
                    label: "管理员", // 显示名称
                    children: [
                        {
                            value: "1", // ID字段名
                            label: "管理员子菜单", // 显示名称
                            children: [], // 子级字段名
                        },
                    ], // 子级字段名
                },
            ],
        };
    },
    mounted() {
        this.getAllIcon();
        if (this.$route.query.id) {
            this.type = "update";
            this.getAdministrators(this.$route.query.id);
        } else {
            this.init = true;
        }
    },
    methods: {
        eventFun(data) {
            console.log(data);
            this.form.icon = data;
        },

        more() {
            this.page++;
        },

        //根据id获取管理员
        getAdministrators(id) {
            this.$request.get("/admin/get/" + id).then((res) => {
                // this.form.username = res.username
                // this.form.nickname = res.nickname
                // this.form.role_id = res.role_id
                // this.form.avatar = res.avatar
                // this.form.disable = res.disable
                this.form = res;
                console.log("res.data", res);
                this.disable = this.form.disable == 1 ? true : false;
                // this.init=true
            });
        },

        //获取所有图标
        getAllIcon(id) {
            this.$request.get("/admin-menu/get_iconfont").then((res) => {
                this.iconList = res;
                console.log("res.icon", res);
            });
        },

        toAdministrators() {
            this.$router.push({ path: "list" });
        },

        setMedium(value) {
            this.form.avatar = value;
            console.log("value", value);
        },

        showFun(res) {
            this.form.show = res ? 1 : 0;
            this.show = res;
        },
        submit() {
            if (!this.form.name) {
                this.$message({
                    message: "请将信息填写完整！",
                    type: "warning",
                });
                return;
            }

            if (this.type == "create") {
                this.$request.post("/admin-menu/create", this.form).then((res) => {
                    this.$message({
                        message: "添加成功",
                        type: "success",
                    });
                    this.toAdministrators();
                });
            } else {
                this.$request
                    .put("/admin/update/" + this.$route.query.id, this.form)
                    .then((res) => {
                        console.log(res);
                        this.$message({
                            message: "修改成功",
                            type: "success",
                        });
                        this.toAdministrators();
                    });
            }
        },
    },
};
</script>

<style lang="scss" scoped></style>